<template>
	<view>
		<scroll-view scroll-y="true" :scroll-into-view="'chat' + scrollTop" :style="{ height: height-KeyHight + 'px' }" scroll-with-animation="true">
			<!-- :scroll-into-view="'chat' + scrollTop"  -->
			<view class="px-2" v-for="(item, index) in list" :key="index" :id="'chat' + index">
				<userChatList :item="item" :index="index" :startTime="index > 0 ? list[index - 1].create_time : 0"></userChatList>
			</view>
		</scroll-view>

		<view class=" fixed-bottom px-3 flex align-center border-top" style="height: 100rpx;" :style="iskey ? 'bottom:' + (KeyHight) + 'px;position: absolute;z-index: 1000;' : '' "> 
			<view class="flex-1">
				<!-- @click="iskey = !iskey" -->
				<input placeholder="请输入" @focus="iskey=true" @blur="iskey=false" class="bg-light" style=" width: 100%;" v-model="content" @confirm="Send()"
				:adjust-position="false"></input>
			</view>
			<view class="flex align-center justify-center ml-2 font-lg" @click="Send">
				<text class="iconfont icon-jijianfasong"></text>
			</view>
		</view>
	</view>
</template>

<script>
import userChatList from '../../compoment/user-chat/userChatList.vue';
import {sendMsg} from '@/request/Api/chat.js'
export default {
	data() {
		return {
			iskey: false,
			scrollTop: 0,
			KeyHight: '',
			height: 600,
			content: '',
			list: [
				
			]
		};
	},
	onLoad() {
		
		const e = uni.getStorageSync('user')
		if(!e)
		{
			uni.showToast({
				title:'用户不存在',
				icon:'none'
			})
			return uni.navigateBack({
				delta:1
			})
		}
		let user =  JSON.parse(e)
		console.log(user)
		uni.setNavigationBarTitle({
			title:user.nikename
		})
		//创建聊天对象
		this.$store.commit("createTouser",user)
		
		//获取聊天记录
		this.$store.dispatch("getChatdetailList",user.userId).then(list=>{
			this.list = list
		})
		
		//监听接受消息
		uni.$on("UserChat",(res)=>{
			if(res.fromId === parseInt(user.userId))
			{
				this.$store.dispatch("formatChatdetailObject",{
					data:res,
					send:false
				}).then((obj)=>{
					this.list.push(obj)
					this.pageToBottom()
				})
			}
		})
		
		
		
		// 这里获取的是去掉标题和tarbar剩余的屏幕的高度
		uni.getSystemInfo({
			success: (res) => {
				console.log(res);
				this.width = res.windowWidth;
				this.height = res.windowHeight - uni.upx2px(130);
			}
		});
		uni.onKeyboardHeightChange((res)=>{
			this.KeyHight=res.height
		})
	},
	mounted() {
		this.pageToBottom();
	},
	beforeDestroy() {
		this.$store.commit("clearToUser")	
		
		uni.$off("UserChat",()=>{})
	},
	methods: {
		Send() {
			if (this.content === '') {
				uni.showToast({
					title: '内容不能为空',
					icon: 'none'
				});
				return;
			}
			this.$store.dispatch("sendMessage",{data:this.content,type:"text"}).then((senddata)=>{
				sendMsg(senddata).then(()=>{
					this.$store.dispatch("formatChatdetailObject",{
						data:senddata,
						send:true
					}).then((obj)=>{
						this.list.push(obj)
						this.content = '';
						this.pageToBottom();
					})
				})
				
			})
		},
		pageToBottom() {
			if (this.list.length === 0) {
				return;
			}
			//这个函数是数据更新引起的dom元素更新，dom元素更新是异步执行的，所以这个函数就是等dom元素更新后后执行
			this.$nextTick(() => {
				this.scrollTop = this.list.length - 1;
			});
		}
	},
	computed: {},
	components: {
		userChatList
	}
};
</script>

<style>
	page {
		box-sizing: border-box;
	}
</style>
